<!--
 * @Author: BM\DENG.RENYI 1787522251@qq.com
 * @Date: 2023-03-19 22:13:10
 * @LastEditors: BM\DENG.RENYI 1787522251@qq.com
 * @LastEditTime: 2023-03-28 16:46:59
 * @FilePath: \vue3\src\views\AboutView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="about">
    <div class="main">
      <div class="left">
        <p>react子应用传递数据：</p>
        <input type="text" v-model="inputData" />
        <button @click="sendData">发送</button>
      </div>
      <div>
        <p>react子应用接收数据：</p>
        <p>主应用传递的数据:{{ mainPorpsData }}</p>
        <p>react传递的数据:{{ reactPorpsData }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputData: '',
      mainPorpsData: '主应用传递的数据',
      reactPorpsData: 'react传递的数据'
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      window.$wujie?.bus.$on('getUserInfo', function (msg2) {
        // setname(msg2);
        console.log('vue->msg2=>', msg2)
      })
      //获取react传递的数据
      window.$wujie?.bus.$emit('vueGetReactData', this.vueGetReactData)

      //获取main传递的数据
      window.$wujie?.bus.$emit('vueGetMainData', this.vueGetMainData)
    },
    sendData() {
      window.$wujie.bus.$on('reactGetVueData', (reactGetVueData) => {
        reactGetVueData(this.inputData)
      })
      window.$wujie.bus.$on('mainGetVueData', (mainGetVueData) => {
        mainGetVueData(this.inputData)
      })
    },
    vueGetReactData(val) {
      this.reactPorpsData = val
    },
    vueGetMainData(val) {
      this.mainPorpsData = val
    }
  }
}
</script>

<style>
@media (min-width: 1024px) {
  .about {
	min-width: 1024px;
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
  .main {
    width: 100%;
    height: 400px;
    padding: 16px;
  }
  
}
</style>
